import * as React from 'react'
import { Table, Input, Button, Space, Form, InputNumber, message, Popconfirm, Row, Divider, Col, Card } from 'antd';
import { SearchOutlined, ReloadOutlined, EditOutlined, DeleteOutlined, PlayCircleOutlined, VerticalRightOutlined } from '@ant-design/icons';
import MyModal from '../notification-table/my-modal';


export interface DetectProps {
    name?: string;
    searchKeys?: string;
    getMainDataUrl?: string;
    getSubDataUrl?: string;
    postMainDataUrl?: string;
    postSubDataUrl?: string;
    putMainDataUrl?: string;
    actUrl?: string;
}


const Detect: React.FC<DetectProps> = function ({ name, searchKeys,
    getMainDataUrl, getSubDataUrl, postMainDataUrl, postSubDataUrl, putMainDataUrl, actUrl,
    ...otherProps }) {


    const [searchTerm, setSearchTerm] = React.useState({});
    const [messageApi, contextHolder] = message.useMessage();
    const defaultMainData = [
        {
            "searchValue": null,
            "createBy": "",
            "createTime": "2025-04-08 10:55:57",
            "updateBy": "",
            "updateTime": "2025-04-08 10:56:01",
            "note": "",
            "params": {},
            "id": 7,
            "code": "IQC20250408001",
            "name": "到货通知单【AN20250327002】检验单",
            "templateId": 22,
            "sourceDocId": 5,
            "sourceDocType": "ARRIVAL_NOTICE",
            "sourceDocCode": "AN20250327002",
            "sourceLineId": 8,
            "vendorId": 201,
            "vendorCode": "V00009",
            "vendorName": "江苏南通塑有为塑料制品有限公司",
            "vendorNick": "南通有为",
            "vendorBatch": null,
            "itemId": 69,
            "materialCode": "IF2022082437",
            "materialName": "色粉【黑色】",
            "specification": "黑色2",
            "unitOfMeasure": "g",
            "unitName": "克",
            "NumberMinCheck": 1,
            "NumberMaxUnqualified": 0,
            "NumberRecived": 1000.0,
            "amount": 1000,
            "NumberQualified": 900,
            "unqualifiedAmount": 100,
            "crRate": 0.0,
            "majRate": 0.0,
            "minRate": 0.0,
            "crNumber": 0,
            "majNumber": 0,
            "minNumber": 0,
            "conclusion": "ACCEPT",
            "reciveDate": "2025-03-27",
            "date": "2025-04-08",
            "person": "admin",
            "personName": "若依",
            "status": "done",
            "attr1": null,
            "attr2": null,
            "attr3": 0,
            "attr4": 0
        },
        {
            "searchValue": null,
            "createBy": "",
            "createTime": "2025-03-12 17:21:04",
            "updateBy": "",
            "updateTime": "2025-03-12 17:21:11",
            "note": "",
            "params": {},
            "id": 6,
            "code": "IQC20250312007",
            "name": "到货通知单【AN20250312003】检验单",
            "templateId": 22,
            "sourceDocId": 2,
            "sourceDocType": "ARRIVAL_NOTICE",
            "sourceDocCode": "AN20250312003",
            "sourceLineId": 4,
            "vendorId": 203,
            "vendorCode": "V00038",
            "vendorName": "乙方工厂",
            "vendorNick": "1",
            "vendorBatch": null,
            "itemId": 69,
            "materialCode": "IF2022082437",
            "materialName": "色粉【黑色】",
            "specification": "黑色2",
            "unitOfMeasure": "g",
            "unitName": "克",
            "NumberMinCheck": 1,
            "NumberMaxUnqualified": 0,
            "NumberRecived": 10000.0,
            "amount": 10000,
            "NumberQualified": 10000,
            "unqualifiedAmount": 0,
            "crRate": 0.0,
            "majRate": 0.0,
            "minRate": 0.0,
            "crNumber": 0,
            "majNumber": 0,
            "minNumber": 0,
            "conclusion": "ACCEPT",
            "reciveDate": "2025-03-12",
            "date": "2025-03-12",
            "person": "admin",
            "personName": "若依",
            "status": "done",
            "attr1": null,
            "attr2": null,
            "attr3": 0,
            "attr4": 0
        },
        {
            "searchValue": null,
            "createBy": "",
            "createTime": "2025-03-12 17:20:33",
            "updateBy": "",
            "updateTime": "2025-03-12 17:20:48",
            "note": "",
            "params": {},
            "id": 5,
            "code": "IQC20250312006",
            "name": "到货通知单【AN20250312003】检验单",
            "templateId": 22,
            "sourceDocId": 2,
            "sourceDocType": "ARRIVAL_NOTICE",
            "sourceDocCode": "AN20250312003",
            "sourceLineId": 3,
            "vendorId": 203,
            "vendorCode": "V00038",
            "vendorName": "乙方工厂",
            "vendorNick": "1",
            "vendorBatch": null,
            "itemId": 71,
            "materialCode": "IF2022082403",
            "materialName": "色粉【蓝色】",
            "specification": "蓝色",
            "unitOfMeasure": "g",
            "unitName": "克",
            "NumberMinCheck": 1,
            "NumberMaxUnqualified": 0,
            "NumberRecived": 10000.0,
            "amount": 10000,
            "NumberQualified": 10000,
            "unqualifiedAmount": 0,
            "crRate": 0.0,
            "majRate": 0.0,
            "minRate": 0.0,
            "crNumber": 0,
            "majNumber": 0,
            "minNumber": 0,
            "conclusion": "ACCEPT",
            "reciveDate": "2025-03-12",
            "date": "2025-03-12",
            "person": "admin",
            "personName": "若依",
            "status": "done",
            "attr1": null,
            "attr2": null,
            "attr3": 0,
            "attr4": 0
        },
        {
            "searchValue": null,
            "createBy": "",
            "createTime": "2025-03-12 17:13:56",
            "updateBy": "",
            "updateTime": "2025-03-12 17:14:34",
            "note": "",
            "params": {},
            "id": 4,
            "code": "IQC20250312005",
            "name": "到货通知单【AN20250312003】检验单",
            "templateId": 23,
            "sourceDocId": 2,
            "sourceDocType": "ARRIVAL_NOTICE",
            "sourceDocCode": "AN20250312003",
            "sourceLineId": 2,
            "vendorId": 203,
            "vendorCode": "V00038",
            "vendorName": "乙方工厂",
            "vendorNick": "1",
            "vendorBatch": null,
            "itemId": 70,
            "materialCode": "IF2022082432",
            "materialName": "PVC颗粒",
            "specification": "透明",
            "unitOfMeasure": "KG",
            "unitName": "公斤",
            "NumberMinCheck": 1,
            "NumberMaxUnqualified": 0,
            "NumberRecived": 100.0,
            "amount": 100,
            "NumberQualified": 90,
            "unqualifiedAmount": 10,
            "crRate": 0.0,
            "majRate": 0.0,
            "minRate": 0.0,
            "crNumber": 0,
            "majNumber": 0,
            "minNumber": 0,
            "conclusion": "ACCEPT",
            "reciveDate": "2025-03-12",
            "date": "2025-03-12",
            "person": "admin",
            "personName": "若依",
            "status": "done",
            "attr1": null,
            "attr2": null,
            "attr3": 0,
            "attr4": 0
        },
        {
            "searchValue": null,
            "createBy": "",
            "createTime": "2025-03-12 17:02:33",
            "updateBy": "",
            "updateTime": null,
            "note": "",
            "params": {},
            "id": 3,
            "code": "IQC20250312004",
            "name": "到货通知单【AN20250312003】检验单",
            "templateId": 23,
            "sourceDocId": 2,
            "sourceDocType": "ARRIVAL_NOTICE",
            "sourceDocCode": "AN20250312003",
            "sourceLineId": 2,
            "vendorId": 203,
            "vendorCode": "V00038",
            "vendorName": "乙方工厂",
            "vendorNick": "1",
            "vendorBatch": null,
            "itemId": 70,
            "materialCode": "IF2022082432",
            "materialName": "PVC颗粒",
            "specification": "透明",
            "unitOfMeasure": "KG",
            "unitName": "公斤",
            "NumberMinCheck": 1,
            "NumberMaxUnqualified": 0,
            "NumberRecived": 100.0,
            "amount": null,
            "NumberQualified": 90,
            "unqualifiedAmount": 0,
            "crRate": 0.0,
            "majRate": 0.0,
            "minRate": 0.0,
            "crNumber": 0,
            "majNumber": 0,
            "minNumber": 0,
            "conclusion": "ACCEPT",
            "reciveDate": "2025-03-12",
            "date": "2025-03-12",
            "person": "admin",
            "personName": "若依",
            "status": "todo",
            "attr1": null,
            "attr2": null,
            "attr3": 0,
            "attr4": 0
        },
        {
            "searchValue": null,
            "createBy": "",
            "createTime": "2025-03-12 17:01:48",
            "updateBy": "",
            "updateTime": null,
            "note": "",
            "params": {},
            "id": 2,
            "code": "IQC20250312003",
            "name": "到货通知单【AN20250312003】检验单",
            "templateId": 23,
            "sourceDocId": 2,
            "sourceDocType": "ARRIVAL_NOTICE",
            "sourceDocCode": "AN20250312003",
            "sourceLineId": 2,
            "vendorId": 203,
            "vendorCode": "V00038",
            "vendorName": "乙方工厂",
            "vendorNick": "1",
            "vendorBatch": null,
            "itemId": 70,
            "materialCode": "IF2022082432",
            "materialName": "PVC颗粒",
            "specification": "透明",
            "unitOfMeasure": "KG",
            "unitName": "公斤",
            "NumberMinCheck": 1,
            "NumberMaxUnqualified": 0,
            "NumberRecived": 100.0,
            "amount": null,
            "NumberQualified": 90,
            "unqualifiedAmount": 0,
            "crRate": 0.0,
            "majRate": 0.0,
            "minRate": 0.0,
            "crNumber": 0,
            "majNumber": 0,
            "minNumber": 0,
            "conclusion": "ACCEPT",
            "reciveDate": "2025-03-12",
            "date": "2025-03-12",
            "person": "admin",
            "status":"done"
        },
        {

            "note": "",
            "params": {},
            "id": 1,
            "code": "IQC20250312002",
            "name": "到货通知单【AN20250312002】检验单",
            "templateId": 19,
            "itemId": 72,
            "materialCode": "IF2022082404",
            "materialName": "钢筋",
            "specification": "100mm X  5mm",
            "unitOfMeasure": "m",
            "unitName": "米",
            "NumberMinCheck": 1,
            "NumberMaxUnqualified": 0,
            "NumberRecived": 1000.0,
            "amount": null,
            "NumberQualified": 1000,
            "unqualifiedAmount": 0,
            "crRate": 0.0,
            "majRate": 0.0,
            "minRate": 0.0,
            "crNumber": 0,
            "majNumber": 0,
            "minNumber": 0,
            "conclusion": "ACCEPT",
            "reciveDate": "2025-03-12",
            "date": "2025-03-12",
            "person": "admin",
            "personName": "若依",
            "status": "done",
          
        }
    ]
    const defaultSubData = [
        {
           
            "note": "",
            "params": {},
            "lineId": 5,
            "iqcId": 3,
            "indexId": 201,
            "code": "I0002",
            "name": "高度",
            "type": "SIZE",
            "tool": "卡尺",
            "checkMethod": null,
            "value": null,
            "unit": null,
            "thresholdMax": 0.0,
            "thresholdMin": 0.0,
            "crNum": 0,
            "majNum": 0,
            "minNum": 0,
            
        }
    ]
    const [mainData, setMainData] = React.useState(defaultMainData);
    const [subData, setSubData] = React.useState(defaultSubData);
    const [mainPostForm] = Form.useForm()
    const [mainUpdateForm] = Form.useForm()
    const [subPostForm] = Form.useForm()

    const defaultSearchKeys = 'code,name';
    let searchKeyList = searchKeys === '' ? defaultSearchKeys.split(',').map(item => item.trim()) : searchKeys.split(',').map(item => item.trim());
    //console.log(supportExport)


    //Api方法区 两个get 两个post 一个put 还有一个实际改变库存的方法

    //getMainData
    function getMainData(url) {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setMainData(data.data);
            })
    }
    //getSubData 
    function getSubData(url) {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setSubData(data.data);
            })
    }
    //act 
    function act(url) {
        fetch(url)
            .then(response => response.json())
            .then(data => {
            })
        messageApi.open({
            type: 'success',
            content: '入库成功',
        });
    }
    //postMainData
    function postMainData(values: any, url) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(
                values
            )
        })
            .then(response => response.json())
            .then(data => {

            })
        messageApi.open({
            type: 'success',
            content: '新增成功',
        });
    }
    //postMainData
    function postSubData(values: any, url) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(
                values
            )
        })
            .then(response => response.json())
            .then(data => {

            })
        messageApi.open({
            type: 'success',
            content: '新增成功',
        });
    }
    //putMainData
    function putMainData(values: any, url) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(
                values
            )
        })
            .then(response => response.json())
            .then(data => {

            })
        messageApi.open({
            type: 'success',
            content: '修改成功',
        });
    }


    //筛选功能
    const handleSearch = () => {
        //这里的查找是字符串包含 如果要完全匹配改成===
        let filteredData = mainData;

        for (var i in searchKeyList) {
            var searchKey = searchKeyList[i];
            if (searchKey === 'id')
                continue;
            if (searchTerm[searchKey]) {
                filteredData = filteredData.filter(item => item[searchKey].includes(searchTerm[searchKey]));
            }
        }
        //console.log(filteredData)
        setMainData(filteredData);
    }
    const resetSearch = () => {
        setSearchTerm({})
        //TODO: setMainData()
    }
    const SearchInput = () => {
        const handleInputChange = (key) => (e) => {
            setSearchTerm(prevState => ({
                ...prevState,
                [key]: e.target.value
            }));
            console.log(key, e.target.value);
        }
        return (
            <>
                <Space size='large'>
                    {searchKeyList.map(key => (
                        <Input
                            placeholder={"请输入" + key}
                            value={searchTerm[key]}
                            onChange={handleInputChange(key)}
                            style={{ width: 200 }}
                        />
                    ))}
                </Space>
            </>
        )
    }

    //主界面表格列
    let mainColumns = []
    let mainColumnsJson = {

        "code": "检验单编号",
        "name": "检验单名称",
        "materialCode": "产品物料编码",
        "materialName": "产品物料名称",
        "amount": "检测数量",
        "unqualifiedAmount": "不合格数量",
        "conclusion": "结论",
        "date": "检测日期",
        "person": "检测人员",
        "status": "单据状态",
        "action": "操作"
    }
    //数据项子界面表格列
    let subColumns = []
    let subColumnsJson = {
        "name": "检测项名称",
        "type": "检测项类型",
        "tool": "检测工具",
        "request": "要求",
        "value": "标准值",
        "unit": "单位",
        "crNum": "致命缺陷数量",
        "majNum": "严重缺陷数量",
        "minNum": "轻微缺陷数量",
        "note": "备注",

    }
    for (var x in mainColumnsJson) {
        mainColumns.push({
            title: mainColumnsJson[x],
            dataIndex: x,
            key: x
        })
    }
    for (var x in subColumnsJson) {
        subColumns.push({
            title: subColumnsJson[x],
            dataIndex: x,
            key: x
        })
    }
    //自定义操作列渲染
    const targetObject = mainColumns.find(item => item.key === 'action');
    const edit = (record) => {
        mainUpdateForm.setFieldsValue(record);
        updateModalVisibility(1, true);
    }
    const deleteRow = (key) => {
        const newData = mainData.filter((item) => item.id !== key);
        setMainData(newData);

        //TODO Fetch DELETE
    };

    if (targetObject) {
        targetObject.render = (_, record) => {
            if (record.status === 'todo') {
                return (
                    <>
                        <Space size='middle'>
                            <a href="#" onClick={() => edit(record)}><PlayCircleOutlined /> 执行检验</a>
                            <Popconfirm title="确定要删除吗？" onConfirm={() => deleteRow(record.id)}>
                                <a href="#" style={{ color: 'red' }}><DeleteOutlined /> 删除</a>
                            </Popconfirm>
                        </Space>
                    </>
                )
            } else {
                return (<></>)
            }

        };
    }

    const statusObject = mainColumns.find(item => item.key === 'status');
    if (statusObject) {
        statusObject.render = (_, record) => {
            if (record.status === 'todo') {
                return (<>待入库</>)
            } else {
                return (<>已完成</>)
            }
        }
    }

    const codeObject = mainColumns.find(item => item.key === 'code');
    if (codeObject) {
        codeObject.render = (_, record) => {
            return (
                <>
                    <a href="#" onClick={() => edit(record)}>{record.code}</a>
                </>
            )
        }
    }

    //console.log('mainColumns: ', mainColumns);



    //对话框
    const [isModalVisible, setIsModalVisible] = React.useState([false, false, false]);

    // 修改第 i 个元素的值
    const updateModalVisibility = (i: number, newValue: boolean) => {
        setIsModalVisible(prevState => {
            // 创建一个新的数组，避免直接修改原数组
            const newArray = [...prevState];
            newArray[i] = newValue; // 修改第 i 个元素
            return newArray;
        });
    };
    const onFinish = (values: any) => {
        console.log('Success:', values);
        updateModalVisibility(0, false);
    };
    const submitMainUpdateForm = (values: any) => {
        console.log('Success:', values);
        updateModalVisibility(1, false);
    }

    const formItemsJsonA =
        [
            {
                gutter: 16,
                cols: [
                    {
                        span: 12,
                        label: '入库单编号',
                        name: 'code',
                        type: 'Input',
                        placeholder: '入库单编号'
                    },
                    {
                        span: 12,
                        label: '入库单名称',
                        name: 'name',
                        type: 'Input',
                        placeholder: '入库单名称'
                    }
                ]
            },
            {
                gutter: 16,
                cols: [
                    {
                        span: 8,
                        label: '入库日期',
                        name: 'date',
                        type: 'Input',
                        placeholder: '入库日期'
                    },
                    {
                        span: 8,
                        label: '到货通知单',
                        name: 'notificationNumber',
                        type: 'Input',
                        placeholder: '到货通知单'
                    },
                    {
                        span: 8,
                        label: '采购订单号',
                        name: 'DetectNumber',
                        type: 'Input',
                        placeholder: '采购订单号'
                    }
                ]
            },
            {
                cols: [
                    {
                        span: 24,
                        label: '备注',
                        name: 'note',
                        type: 'TextArea',
                        placeholder: '请输入备注',
                        rows: 3
                    }
                ]
            }
        ]
    const formItemsJsonB =
        [
            {
                gutter: 16,
                cols: [
                    {
                        span: 8,
                        label: '物料编号',
                        name: 'code',
                        type: 'Input',
                        placeholder: '物料编号'
                    },
                    {
                        span: 8,
                        label: '物料名称',
                        name: 'name',
                        type: 'Input',
                        placeholder: '物料名称'
                    },
                    {
                        span: 8,
                        label: '单位',
                        name: 'unit',
                        type: 'Input',
                        placeholder: '单位'
                    }
                ]
            },
            {
                gutter: 16,
                cols: [
                    {
                        span: 8,
                        label: '入库数量',
                        name: 'amount',
                        type: 'InputNumber',
                        placeholder: '入库数量'
                    },
                    {
                        span: 8,
                        label: '规格型号',
                        name: 'specification',
                        type: 'Input',
                        placeholder: '规格型号'
                    },
                    {
                        span: 8,
                        label: '批次号',
                        name: 'batchNumber',
                        type: 'Input',
                        placeholder: '批次号'
                    }
                ]
            },
            {
                cols: [
                    {
                        span: 24,
                        label: '备注',
                        name: 'note',
                        type: 'TextArea',
                        placeholder: '请输入备注',
                        rows: 3
                    }
                ]
            }
        ]

    /**
* 根据 formItemsJson 生成 JSX 代码字符串（不包含 rules）
* @param {Array} formItemsJson - 表单项的 JSON 数据
* @returns {string} - 生成的 JSX 代码字符串
*/
    function generateJSXFromJSON(formItemsJson) {
        const jsxCode = [];

        formItemsJson.forEach((row, rowIndex) => {
            // 处理每一行
            const rowChildren = [];
            row.cols.forEach((col, colIndex) => {
                // 处理每一列
                const { type, name, label, placeholder, span } = col;

                // 构建 <Form.Item> 的属性
                const formItemProps = [
                    `label="${label}"`,
                    `name="${name}"`,
                ];

                // 构建表单控件（如 Input、TextArea 等）
                let control;
                switch (type) {
                    case 'Input':
                        control = `<Input placeholder="${placeholder}" />`;
                        break;
                    case 'TextArea':
                        control = `<Input.TextArea placeholder="${placeholder}" rows={${col.rows || 4}} />`;
                        break;
                    case 'InputNumber':
                        control = `<InputNumber placeholder="${placeholder}" />`;
                        break;
                    default:
                        control = '';
                }

                // 构建完整的 <Form.Item>
                const formItem = `<Form.Item ${formItemProps.join(' ')}>\n  ${control}\n</Form.Item>`;
                rowChildren.push(formItem);
            });

            // 将当前行的内容包裹在 <Row> 和 <Col> 中
            const rowContent = rowChildren.map((child) => `<Col span={${row.span || 24}}>\n  ${child}\n</Col>`).join('\n');
            jsxCode.push(`<Row gutter={${row.gutter || 0}}>\n${rowContent}\n</Row>`);
        });

        // 返回最终的 JSX 代码
        return jsxCode.join('\n\n');
    }

    //console.log(generateJSXFromJSON(formItemsJsonB));





    const CustomFormA = () => {
        const ret = (
            <>
                <Form form={mainPostForm} name='mainPostForm' onFinish={onFinish} layout="vertical" labelAlign='left'>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="检验单编号" name="code">
                                <Input placeholder="检验单编号" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="检验单名称" name="name">
                                <Input placeholder="检验单名称" />
                            </Form.Item>
                        </Col>

                    </Row>
                    <Divider>产品物料</Divider>
                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item label="物料编号" name="materialCode">
                                <Input placeholder="物料编号" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="物料名称" name="materialName">
                                <Input placeholder="物料名称" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="单位" name="unit">
                                <Input placeholder="单位" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Divider>检测情况</Divider>
                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item label="检测数量" name="amount">
                                <InputNumber placeholder="检测数量" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="不合格数量" name="unqualifiedAmount">
                                <InputNumber placeholder="不合格数量" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="检测日期" name="date">
                                <Input placeholder="检测日期" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <Form.Item label="检测结论" name="conclusion">
                                <Input placeholder="检测结论" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="检测人员" name="person">
                                <Input placeholder="检测人员" />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={0}>
                        <Col span={24}>
                            <Form.Item label="备注" name="note">
                                <Input.TextArea placeholder="请输入备注" rows={3} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Form.Item>
                        <Space style={{ marginLeft: 400, marginTop: 16 }} direction="horizontal">
                            <Button onClick={() => updateModalVisibility(0, false)}>取消</Button>
                            <Button type="primary" htmlType="submit" >提交</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </>
        )

        return ret;
    }

    // "name": "检测项名称",
    // "type": "检测项类型",
    // "tool": "检测工具",
    // "request": "要求",
    // "value": "标准值",
    // "unit": "单位",
    // "crNum": "致命缺陷数量",
    // "majNum": "严重缺陷数量",
    // "minNum": "轻微缺陷数量",
    // "note": "备注",
    const CustomFormB = () => {
        return (
            <>
                <Form form={subPostForm} name='subPostForm' onFinish={onFinish} layout="vertical" labelAlign='left'>
                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item label="检测项名称" name="name">
                                <Input placeholder="检验项名称" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="检测单类型" name="type">
                                <Input placeholder="检验单类型" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="检测工具" name="tool">
                                <Input placeholder="检测工具" />
                            </Form.Item>
                        </Col>

                    </Row>
                    
                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item label="检测要求" name="request">
                                <Input placeholder="检测要求" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="标准值" name="value">
                                <Input placeholder="标准值" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="单位" name="unit">
                                <Input placeholder="单位" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item label="致命缺陷数量" name="crNum">
                                <InputNumber placeholder="致命缺陷数量" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="严重缺陷数量" name="majNum">
                                <InputNumber placeholder="严重缺陷数量" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="轻微缺陷数量" name="minNum">
                                <InputNumber placeholder="轻微缺陷数量" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={0}>
                        <Col span={24}>
                            <Form.Item label="备注" name="note">
                                <Input.TextArea placeholder="请输入备注" rows={3} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Form.Item>
                        {/* 保存是修改MainData的 提交是执行act动作的 */}
                        <Space style={{ marginLeft: 400, marginTop: 16 }} direction="horizontal">
                            <Button onClick={() => updateModalVisibility(2, false)}>取消</Button>
                            <Button type="primary" htmlType="submit" onClick={() => {
                                updateModalVisibility(2, false)
                            }}>保存</Button>

                        </Space>
                    </Form.Item>
                </Form>
            </>
        )
    }

    const CustomFormWithTable = () => {
        return (
            <>
                <Form form={mainUpdateForm} name="mainUpdateForm" onFinish={submitMainUpdateForm} layout="horizontal" labelAlign='left'>
                <Row gutter={8}>
                        <Col span={12}>
                            <Form.Item label="检验单编号" name="code">
                                <Input placeholder="检验单编号" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="检验单名称" name="name">
                                <Input placeholder="检验单名称" />
                            </Form.Item>
                        </Col>

                    </Row>
                    <Divider>产品物料</Divider>
                    <Row gutter={8}>
                        <Col span={8}>
                            <Form.Item label="物料编号" name="materialCode">
                                <Input placeholder="物料编号" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="物料名称" name="materialName">
                                <Input placeholder="物料名称" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="单位" name="unit">
                                <Input placeholder="单位" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Divider>检测情况</Divider>
                    <Row gutter={8}>
                        <Col span={8}>
                            <Form.Item label="检测数量" name="amount">
                                <InputNumber placeholder="检测数量" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="不合格数量" name="unqualifiedAmount">
                                <InputNumber placeholder="不合格数量" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="检测日期" name="date">
                                <Input placeholder="检测日期" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={8}>
                            <Form.Item label="检测结论" name="conclusion">
                                <Input placeholder="检测结论" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="检测人员" name="person">
                                <Input placeholder="检测人员" />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={8}>
                        <Col span={24}>
                            <Form.Item label="备注" name="note">
                                <Input.TextArea placeholder="请输入备注" rows={3} />
                            </Form.Item>
                        </Col>
                    </Row>
                    
                    <Card extra={<Button type="primary" onClick={() => updateModalVisibility(2, true)}>新增</Button>}>
                        <Table columns={subColumns} dataSource={subData}></Table>
                    </Card>


                    <Form.Item>
                        <Space style={{ marginLeft: 400, marginTop: 16 }} direction="horizontal">
                            <Button onClick={() => updateModalVisibility(1, false)}>取消</Button>
                            <Button type="primary" htmlType="submit" >保存</Button>
                            <Button type="primary" onClick={() => { updateModalVisibility(1, false) }}>提交</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </>
        )
    }

    return (
        <>
            {contextHolder}

            <div style={{ marginTop: 20, marginLeft: 20 }}>
                <Space size='large'>
                    <SearchInput />
                    <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
                        搜索
                    </Button>
                    <Button icon={<ReloadOutlined />} onClick={resetSearch}>
                        重置
                    </Button>
                    <Button type="primary" onClick={() => updateModalVisibility(0, true)}>
                        + 新增
                    </Button>
                    {/* 主界面新增对话框 一个Form*/}
                    <MyModal open={isModalVisible[0]} onCancel={() => updateModalVisibility(0, false)}>
                        <CustomFormA />
                    </MyModal>
                    {/* 主界面更新对话框 包括一个Form和一个Table */}
                    <MyModal open={isModalVisible[1]} onCancel={() => updateModalVisibility(1, false)}>
                        <CustomFormWithTable />
                    </MyModal>
                    {/* 子界面新增对话框 一个Form*/}
                    <MyModal open={isModalVisible[2]} onCancel={() => updateModalVisibility(2, false)} >
                        <CustomFormB />
                    </MyModal>
                </Space>
                <Divider />
                <Row>
                    <Table dataSource={mainData} columns={mainColumns} style={{ width: '100%' }}></Table>
                </Row>
            </div>
        </>
    )

}

Detect.displayName = '检测任务'
export default Detect;